<template>
  <view class="content">
    <view class="header">
      <view class="retreatBtn" @tap="outAccount()">
        <span>退出</span>
        <image class="retreatIcon" src="../../static/img/q.png" mode=""></image>
      </view>
      <view class="userBox">
        <view class="avatar">
          <image class="avatarImg" :src="userInfo.avatar_url" mode=""></image>
        </view>
        <view class="userInfo">
          <view class="name">
            上午好，{{userInfo.nickname}}
          </view>
          <view class="editBtn" @tap="go('/pages/userInfo/userInfo')">
            <image class="img" src="../../static/img/Combined Shape.png" mode=""></image>
            <text>编辑个人信息</text>
          </view>
        </view>
      </view>
    </view>
    <view class="list">
      <view class="list-box" @tap="go('../student/index')">
        <view class="content-box">
          <image src="../../static/img/index/student.png" class="list-img"></image>
        </view>
        <p class="list-title">学生管理</p>
      </view>
      <view class="list-box" @tap="go('../coach/index')">
        <view class="content-box">
          <image src="../../static/img/index/teacher.png" class="list-img"></image>
        </view>
        <p class="list-title">教练管理</p>
      </view>
      <view class="list-box">
        <view class="content-box" @tap="go('../forget/forget')">
          <image src="../../static/img/index/anti-forgetting.png" class="list-img"></image>
        </view>
        <p class="list-title">抗遗忘管理</p>
      </view>
      <view class="list-box" @tap="go('../school/index')">
        <view class="content-box">
          <image src="../../static/img/index/school.png" class="list-img"></image>
        </view>
        <p class="list-title">分校管理</p>
      </view>
      <view class="list-box" @tap="go('../dataList/index')">
        <view class="content-box">
          <image src="../../static/img/index/data.png" class="list-img"></image>
        </view>
        <p class="list-title">数据管理</p>
      </view>
      <view class="list-box" @tap="go('../college/college')">
        <view class="content-box">
          <image src="../../static/img/index/news.png" class="list-img"></image>
        </view>
        <p class="list-title">嗨词商学院</p>
      </view>
      <view class="list-box" @tap="go('../record/record')">
        <view class="content-box">
          <image src="../../static/img/index/feedback.png" class="list-img"></image>
        </view>
        <p class="list-title">抗遗忘记录</p>
      </view>
      <view class="list-box" @tap="go('../feedback/day')">
        <view class="content-box">
          <image src="../../static/img/index/feedback.png" class="list-img"></image>
        </view>
        <p class="list-title">教学反馈</p>
      </view>
      <view class="list-box" @tap="go('../letter/letter')">
        <view class="content-box">
          <image src="../../static/img/index/message.png" class="list-img"></image>
        </view>
        <p class="list-title">站内信</p>
      </view>
      <view class="list-box" @tap="go('../editPwd/editPwd')">
        <view class="content-box">
          <image src="../../static/img/index/password.png" class="list-img"></image>
        </view>
        <p class="list-title">修改密码</p>
      </view>
    </view>
    <view class="systemInfo">
      <view class="item">
        <image class="Setting" src="../../static/img/Setting.png" mode=""></image>
        <view class="substance">
          {{versionCode}}
        </view>

      </view>
      <view class="item" @tap="callPhone()">
        <image class="Phone" src="../../static/img/Phone.png" mode=""></image>
        <view class="substance">
          {{userInfo.kf_phone}}
        </view>
        <view class="">
          [官方联系方式]
        </view>
      </view>
      <view class="item" @tap="navTo(1)">
        <image class="people" src="../../static/img/people.png" mode=""></image>
        <view class="substance">
          隐私政策
        </view>
        <image class="rIcon" src="../../static/img/rIcon.png" mode=""></image>
      </view>
    </view>
    <view class="number">
      ICP备案号：{{userInfo.icp}}
    </view>
  </view>

</template>

<script>
  export default {
    data() {
      return {
        userInfo: {},
        versionCode: ''
      }
    },
    onShow() {
      // #ifdef APP-PLUS
      plus.runtime.getProperty(plus.runtime.appid, (inf) => {
        this.versionCode = inf.version
      })

      //#endif    
    },
    onLoad() {
      this.getIndex()
    },
    methods: {
      async getIndex() {
        const {
          data: res
        } = await uni.$http.post('school/index/index')
        if (res.code == 1) {
          this.userInfo = res.data
        } else {
          this.toast.msg(res.msg)
        }
      },
      outAccount() {
        uni.showModal({
          title: "提示！",
          content: "是否要退出当前账号",
          confirmColor: "#192756",
          success: (res) => {
            if (res.confirm) {
              this.signOut()
            }
          }
        })
      },
      async signOut() {
        const {
          data: res
        } = await uni.$http.post('school/index/outAccount')
        if (res.code == 1) {
          uni.navigateTo({
            url: '../login/login'
          })
        }
      },
      navTo(type) {
        uni.navigateTo({
          url: `/pages/login/agreement?type=${type}`
        })
      },
      // 拨打电话
      callPhone() {
        const phoneNumber = this.userInfo.kf_phone;
        uni.makePhoneCall({
          phoneNumber: phoneNumber, // 电话号码
          success: function() {
            console.log('拨打电话成功');
          },
          fail: function() {
            console.log('拨打电话失败');
          }
        });
      }
    }
  }
</script>

<style lang="scss">
  .list-box {
    width: 23%;
    height: 140rpx;
    float: left;
    margin: 5%;
  }

  .content-box {
    border-radius: 17px;
    background: linear-gradient(138.37deg, rgba(61, 150, 253, 1) 0%, rgba(30, 109, 239, 1) 100%);
    box-shadow: 0px 3px 6px rgba(30, 109, 239, 0.16);
    width: 110rpx;
    height: 100rpx;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .list-img {
    width: 50rpx;
    height: 50rpx;
  }

  .list-title {
    font-size: 26rpx;
    font-weight: 400;
    text-align: center;
    margin-top: 20rpx;
  }

  .content {
    padding-bottom: 20rpx;

    .header {
      position: relative;
      width: 100%;
      height: 382rpx;
      background-image: url('../../static/img/bg.png');

      .retreatBtn {
        box-sizing: border-box;
        padding-left: 35rpx;
        position: absolute;
        top: 123rpx;
        right: 32rpx;
        width: 147rpx;
        height: 47rpx;
        line-height: 47rpx;
        border-radius: 17rpx;
        background: rgba(144, 191, 245, 1);
        font-size: 28rpx;
        color: rgba(255, 255, 255, 1);

        .retreatIcon {
          width: 22rpx;
          height: 27rpx;
          margin-left: 18rpx;
        }
      }

      .userBox {
        position: absolute;
        top: 182rpx;
        left: 63rpx;
        display: flex;

        .avatar {
          width: 149rpx;
          height: 149rpx;
          border-radius: 50%;
          overflow: hidden;

          .avatarImg {
            width: 100%;
            height: 100%;
          }
        }

        .userInfo {
          margin-left: 20rpx;
          padding-top: 10rpx;

          .name {
            color: rgba(255, 255, 255, 1);
            font-size: 32rpx;
            margin-bottom: 30rpx;
          }

          .editBtn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 238rpx;
            height: 47rpx;
            border-radius: 18rpx;
            background: rgba(242, 242, 242, 1);
            font-size: 24rpx;
            color: rgba(102, 102, 102, 1);

            .img {
              width: 24rpx;
              height: 24rpx;
              margin-right: 10rpx;
            }
          }
        }
      }
    }

    .list {
      margin-top: 39rpx;
      width: 90%;
      height: 900rpx;
      margin-left: 5%;
      border-radius: 15px;
      border: 1px solid rgba(226, 226, 226, 1);
      padding: 50rpx 5%;
    }

    .systemInfo {
      margin-top: 10rpx;

      .item {
        width: 625rpx;
        height: 110rpx;
        margin-left: 56rpx;
        padding: 0 63rpx 0 47rpx;
        border-bottom: 2rpx solid rgba(230, 230, 230, 1);
        display: flex;
        align-items: center;

        .substance {
          flex: 1;
          margin-left: 30rpx;
        }

        .Setting {
          width: 49rpx;
          height: 49rpx;
        }

        .Phone {
          width: 40rpx;
          height: 40rpx;
        }

        .people {
          width: 38rpx;
          height: 44rpx;
        }

        .rIcon {
          width: 84rpx;
          height: 42rpx;
        }
      }
    }

    .number {
      text-align: center;
      width: 100%;
      color: rgba(224, 222, 222, 1);
      font-size: 28rpx;
      margin-top: 40rpx;
    }
  }
</style>